<template>
  <div class="tinymce-content">
    <editor :id="tinymceId" v-model="content" tag-name="div" :init="init" />
    <div class="editor-custom-btn-container">
      <EditorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
    </div>
    <div>
      <EditorVideo color="#1890ff" class="editor-video-btn" @VideosuccessCBK="videoSuccessCBK" />
    </div>
  </div>
</template>

<script lang="ts">
import EditorImage from './components/EditorImage.vue'
import EditorVideo from './components/EditorVideo.vue'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme' // 引用主题文件
import 'tinymce/icons/default' // 引用图标文件
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/autolink' // 锚点
import 'tinymce/plugins/autoresize'
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/charmap' // 特殊字符
import 'tinymce/plugins/code' // 查看源码
import 'tinymce/plugins/codesample' // 插入代码
import 'tinymce/plugins/directionality' //
import 'tinymce/plugins/fullpage' // 页面属性编辑
import 'tinymce/plugins/fullscreen' // 全屏
import 'tinymce/plugins/help' // 帮助
import 'tinymce/plugins/hr' // 横线
import 'tinymce/plugins/image' // 图片
import 'tinymce/plugins/imagetools' // 图片工具
import 'tinymce/plugins/importcss' // 图片工具
import 'tinymce/plugins/insertdatetime' // 时间插入
import 'tinymce/plugins/media' // 媒体插入
import 'tinymce/plugins/nonbreaking' //
import 'tinymce/plugins/noneditable' // 不间断空格
import 'tinymce/plugins/pagebreak' // 分页
import 'tinymce/plugins/paste' // 粘贴
import 'tinymce/plugins/preview' // 预览
import 'tinymce/plugins/print' // 打印
import 'tinymce/plugins/quickbars' // 快捷菜单
import 'tinymce/plugins/save' // 保存
import 'tinymce/plugins/searchreplace' // 查询替换
import 'tinymce/plugins/spellchecker' // 拼写检查
import 'tinymce/plugins/tabfocus' //
import 'tinymce/plugins/template' // 插入模板
import 'tinymce/plugins/textpattern' //
import 'tinymce/plugins/toc' //
import 'tinymce/plugins/visualblocks' //
import 'tinymce/plugins/visualchars' //
import 'tinymce/plugins/wordcount' // 数字统计
import 'tinymce/plugins/emoticons' // 表情包
import plugins from './plugins.ts'
import toolbar from './toolbar.ts'
import { ref } from 'vue'
export default {
  components: {
    editor: Editor,
    EditorImage,
    EditorVideo
  },
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入内容！'
    },
    height: {
      type: Number,
      default: 400
    },
    width: {
      type: Number,
      default: 600
    }
  },
  emits: { 'update:modelValue': null },
  setup(props, context) {
    const tinymceId = ref('vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''))
    const init = {
      language_url: '/tinymce/langs/zh_CN.js', // 中文语言包路径
      language: 'zh_CN',
      skin_url: 'tinymce/skins/ui/oxide', // 编辑器皮肤样式
      emoticons_database_url: '/tinymce/emojis.js', // 表情包
      selector: `#${tinymceId.value}`,
      menubar: false, // 隐藏菜单栏
      autoresize_bottom_margin: 50,
      max_height: 800,
      min_height: 350,
      height: props.height,
      width: props.width,
      toolbar_mode: 'sliding',
      placeholder: props.placeholder,
      plugins: plugins,
      toolbar: toolbar,
      content_style: 'p {margin: 5px 0; font-size: 14px}',
      fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
      font_formats:
        '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
      branding: false,
      elementpath: false,
      resize: true, // 禁止改变大小
      statusbar: true, // 隐藏底部状态栏
      default_link_target: '_blank' // 链接默认打开方式
      // 初始化完成回调
      // init_instance_callback: (editor: { selection: { setContent: (arg0: any) => void } }) => {
      //   // 设置默认文案
      //   if (!props.modelValue) {
      //     const text = `<p>${props.placeholder}</p>`
      //     editor.selection.setContent(text)
      //   }
      // }
      //   图片上传
      // images_upload_handler: function (blobInfo, success) {
      //   var reader = new FileReader()
      //   reader.readAsDataURL(blobInfo.blob())
      //   reader.onload = function () {
      //     success(this.result)
      //   }
      // }
    }
    tinymce.init // 初始化
    const revert_data = (content) => {
      context.emit('update:modelValue', content)
    }
    // 图片上传回调
    const imageSuccessCBK = (arr: any[]) => {
      arr.forEach((v) => tinymce.get(tinymceId.value).insertContent(`<img class="wscnph" src="${v.imgUrl}" >`))
    }
    // 视频上传回调
    const videoSuccessCBK = (info: { vodType: string; img: any; link: any }) => {
      tinymce
        .get(tinymceId.value)
        .insertContent(`<video controls="controls" poster="${info.img}" class="video" src="${info.link}" >`)
    }
    return {
      dialogVisible: true,
      init,
      revert_data,
      imageSuccessCBK,
      videoSuccessCBK,
      tinymceId
    }
  },
  data() {
    return {
      content: this.modelValue
    }
  },
  watch: {
    content() {
      this.revert_data(this.content)
    }
  },
  mounted() {}
}
</script>
<style lang="scss" scoped>
.tinymce-content {
  position: relative;
}
</style>
